<template>
	<view class="to-do-view" v-if="list.length > 0">
		<uni-section titleFontSize="36rpx" class="app-section" title="待办流程" color="#191919" :arrow="false"
			@click="handleClickArrow(typeItem)">
			<template v-slot:right>
				<view style="display: flex;align-items: center;gap: 10rpx;color: #bbb;font-size: 28rpx;">
					<uni-icons type="right" color="#bbb" size="18"></uni-icons>
				</view>
			</template>
		</uni-section>
		<view style="display: flex;flex-direction: column;gap: 30rpx;">
			<view style="" v-for="(item, index) in list" :index="index" @click="handleDetails(item)">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view style="">
						{{ item['name'] }}
					</view>
					<view style="color: #bbb;">
						{{ item['beginDate'] || '草稿' }}
					</view>
				</view>
				<view style="color: #bbb;display: flex;justify-content: space-between;align-items: center;">
					<view class="">
						{{ item.typeName }}
					</view>
					<view v-if="!item.isReaded"
						style="width: 20rpx;height: 20rpx;background-color: rgba(255,0,0,0.7);border-radius: 50%;">

					</view>
				</view>
				<view style="height: 1rpx;background-color: #ddd;width: 100%;margin-top: 30rpx;"
					v-if="list.length - 1 != index">

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	getAction
} from "@/utils/request";
import {
	ref,
	onMounted,
	computed
} from 'vue'
import {
	dayjs
} from '@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js'
const url = {
	list: '/m/flow/listDoingForPortal'
}
const list = ref([])
const init = async () => {
	const res = await getAction(url.list)
	list.value = res?.data?.list || []
	list.value.forEach(item => {
		if (item.beginDate) {
			const num = dayjs().diff(`${dayjs().format('YYYY')}-${item.beginDate}`, 'hours')
			if (num >= 0) {
				item.beginDate = `${num}小时`
			}
		}
	})
}
const fetch = () => {
	init()
}
onMounted(fetch)
const handleClickArrow = () => {
	uni.navigateTo({
		url: '/sub_flow/doingFlow/DoingFlow'
	})
}
const handleDetails = (item) => {
	uni.navigateTo({
		url: `/application/process?record=${JSON.stringify({ myActionId: item.myActionId })}`
	})
}
</script>

<style lang='scss' scoped>
.app-section {
	::v-deep .uni-section__content-title {
		color: #393939;
		font-weight: bold;
		font-size: 32rpx;
	}
}

.to-do-view {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}

::v-deep .uni-section-header {
	padding: 0 0 30rpx !important;
}
</style>